<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阅微札记</title>
    <link rel="stylesheet" href="../static/plugins/bootstrap-5.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/plugins/fontawesome-free-6.0.0-web/css/all.min.css">
    <link rel="stylesheet" href="../static/css/webBase.css">
    <script src="../static/js/jquery-3.7.1.min.js"></script>
    <script src="../static/js/bootbox.min.js"></script>
    <!-- 为了更好地兼容移动设备，使用CSS的媒体查询功能 -->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <style>
        @font-face {
            font-family: 'MaobilogoFont'; /* 字体名称 */
            src: url('../static/fonts/xmfont1617.ttf') format('truetype');
        }
    </style>
    {% block head %}

    {% endblock head %}
</head>
<body>
<!--头部logo区域-->
<!--<div class="header">-->
<!--    <div class="container">-->
<!--        <div class="row">-->
<!--            <div class="col-5" style="line-height: 80px"><img src="../static/img/blogweblogo.png" width="260"/></div>-->
<!--            <div class="col-7 d-none d-sm-block"-->
<!--                 style="line-height: 80px;text-align: right;font-size: 2rem;font-family: 'MaobilogoFont', sans-serif;">-->
<!--                苔花虽米小，寸心亦承露-->
<!--            </div>-->
<!--            <div class="col-7 d-sm-none"-->
<!--                 style="line-height: 80px;text-align: right;font-size: 1.5rem;font-family: 'MaobilogoFont', sans-serif;">-->
<!--                技术博客-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<!--导航栏区域-->
<div class="menu">
    <div class="container-fluid">
        <div class="navbar navbar-expand-lg">
            <div class="container" style="padding: 0">
                <a class="navbar-brand" href="#"><img src="../static/img/logo.png" width="150"></a>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="/">首页</a>
                        </li>
                        {% for k,v in article_type.items() %}
                        <li class="nav-item">
                            <a class="nav-link" href="/type/{{k}}-1">{{v}}</a>
                        </li>
                        {% endfor %}
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                               aria-expanded="false">
                                其他
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" style="color: black" href="#">联系我</a></li>
                                <li><a class="dropdown-item" style="color: black" href="#">帮助</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" style="color: black" href="#">about</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!--搜索框-->
                <div class="d-flex search-container search-box" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"
                           id="searcharticle" onkeyup="doSearch(event)">
                    <button class="btn btn-outline-light search-button" type="button" onclick="doSearch(null)"><i
                            class="fa fa-search" aria-hidden="true"></i>
                    </button>
                </div>
                {% if session.get('islogin') == 'true' %}
                <ul class="navbar-nav me-auto mb-2 mb-lg-0 clearfix" style="align-items: center">
                    <li class="nav-item" style="margin-right: 5px;width: 100px">
                        {% if session.get('role') == 'admin' %}
                        <a class="nav-link" aria-current="page" href="{{url_for('admin.admin_center')}}">系统管理</a>
                        {% else %}
                        <a class="nav-link" aria-current="page" href="{{url_for('ucenter.user_center')}}">用户中心</a>
                        {% endif %}
                    </li>
                    <!-- 通知图标 -->
                    <li style="position: relative;margin-right: 15px">
                        <a role="button" class="btn btn-light btn-sm position-relative no-read"
                           data-bs-toggle="dropdown"
                           data-bs-trigger="hover" aria-expanded="false"
                           style="background-color: #ffffff;border: solid 0;padding-top: 5px;">
                            <i class="fas fa-bell"></i>
                            <span id='bell-red-circle'
                                  class="position-absolute top-50 start-100 translate-middle badge rounded-pill p-1 rounded-circle">
                            <span id='hid-noread' class="visually-hidden"></span></span>
                        </a>
                        <ul class="dropdown-menu" style="position: absolute;">
                            <!--                            通知列表这里生成-->
                            <div id="notificationsList" class="notifications-list">
                                <!-- 通知列表将在这里动态生成 -->
                                <li><a class="dropdown-item" href="#" id="no-comment">评论</a></li>
                                <li><a class="dropdown-item" href="#" id="no-like">赞</a></li>
                                <li><a class="dropdown-item" href="#" id="no-reply">回复</a></li>
                                <li><a class="dropdown-item" href="#" id="no-system">系统通知</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" href="#" id="clear-noti">清除所有通知</a></li>
                            </div>

                        </ul>
                    </li>

                    <li class="nav-item dropdown" style="margin: 0 10px">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                           aria-expanded="false" style="color: #1da1f2"><img
                                style="width: 35px;margin-right: 5px;border-radius: 50%"
                                src="../static/img/avatar/{{session.get('avatar')}}">{{session['nickname']}}</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" style="color: black" href="#">联系我</a></li>
                            <li><a class="dropdown-item" style="color: black" href="#">帮助</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" style="color: black" href="/logout">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
                {% else %}
                <div>
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item" style="margin: 0 10px">
                            <a href="/login">
                                <button class="btn btn-primary" type="button">登 录</button>
                            </a>
                        </li>
                    </ul>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!--中间区域-->
<div class="container">
    <div class="row">
        {% block bodyMiddle %}


        {% endblock bodyMiddle %}
    </div>
</div>


<!--底部区域-->
<!--<div class="container-fluid footer">-->
<!--    <div class="row">-->
<!--        <div class="col-12 page-bottom-info"><a href="#">友情链接：</a><a href="#">xx中台</a><a href="#" style="margin: 0 20px">AI中心</a><a-->
<!--                href="#">智能中心</a></div>-->

<!--    </div>-->
<!--</div>-->


<!-- back-to-top-button引用了yueweinote.js文件 -->
<button id="back-to-top" class="back-to-top">回到顶部</button>


<script src="../static/plugins/bootstrap-5.3.7-dist/js/bootstrap.bundle.js"></script>
<!--鼠标特效-->
<script src="../static/js/cursor-effects.js"></script>
<!--自定义js-->
<script src="../static/js/yueweinote.js"></script>
<!--实现通知悬停，显示未读消息数-->
<script>
    const button = document.querySelector('.no-read');
    const no_read_count = button.querySelector("#hid-noread")
    button.addEventListener('mouseenter', function () {
        no_read_count.classList.remove('visually-hidden'); //移除类
    });

    button.addEventListener('mouseleave', function () {
        no_read_count.classList.add('visually-hidden'); // 添加类
    });
</script>
<!--获取未读消息，然后通知在通知栏-->
<script>
    const currentUser = '{{session.get("islogin")}}';
    document.addEventListener('DOMContentLoaded', checkNotifications(currentUser))

    // 新增：检查新通知
    function checkNotifications(currentUser) {
        if (currentUser != 'true') return;

        // 实际应用中应该调用API检查新通知
        fetch('/api/notifications')
            .then(response => response.json())
            .then(notifications => {

                // console.log(notifications)
                processNotifications(notifications);
            })
            .catch(error => {
                console.error('获取通知失败:', error);
            });
    }

    // 处理通知
    function processNotifications(notifications) {
        var flag = 0;
        const sum = Object.values(notifications).reduce((acc, curr) => acc + curr, 0)

        if (notifications.comment_count > 0) {
            flag = 1;
            const notificationsItem = document.getElementById('no-comment');
            const notificationhtml = notificationsItem.textContent + `<span class="badge rounded-pill bg-danger py-1 rounded-circle" aria-hidden="true" style="float: right">${notifications.comment_count}</span>`;
            notificationsItem.innerHTML = notificationhtml;
        }
        if (notifications.like_count > 0) {
            flag = 1;
            const notificationsItem = document.getElementById('no-like');
            const notificationhtml = notificationsItem.textContent + `<span class="badge rounded-pill bg-danger py-1 rounded-circle" aria-hidden="true" style="float: right">${notifications.like_count}</span>`;
            notificationsItem.innerHTML = notificationhtml;
        }
        if (notifications.reply_count > 0) {
            flag = 1;
            const notificationsItem = document.getElementById('no-reply');
            const notificationhtml = notificationsItem.textContent + `<span class="badge rounded-pill bg-danger py-1 rounded-circle" aria-hidden="true" style="float: right">${notifications.reply_count}</span>`;
            notificationsItem.innerHTML = notificationhtml;
        }
        if (notifications.system_count > 0) {
            flag = 1;
            const notificationsItem = document.getElementById('no-system');
            const notificationhtml = notificationsItem.textContent + `<span class="badge rounded-pill bg-danger py-1 rounded-circle" aria-hidden="true" style="float: right">${notifications.system_count}</span>`;
            notificationsItem.innerHTML = notificationhtml;
        }
        if (notifications.total_count > 0) {
            flag = 1;
            const notificationsItem = document.getElementById('no-notification');
            const notificationhtml = notificationsItem.textContent + `<span class="badge rounded-pill bg-danger py-1 rounded-circle" aria-hidden="true" style="float: right">${notifications.total_count}</span>`;
            notificationsItem.innerHTML = notificationhtml;
        }
        if (flag == 1) {
            const notificationsCircle = document.getElementById('bell-red-circle');
            notificationsCircle.classList.add('bg-danger');
            const notificationSound = document.getElementById('hid-noread');
            notificationSound.textContent = sum + '条未读通知';
        } else {
            const notificationsCircle = document.getElementById('bell-red-circle');
            notificationsCircle.classList.remove('bg-danger');
        }

    }

    //清除通知内容
    const clr_noti = document.getElementById('clear-noti')
    clr_noti.addEventListener('click', function () {
        fetch('/api/clear/notifications')
            .then(response => {
                if (!response.ok) { // 手动检查HTTP状态码
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json(); // 解析JSON响应体
            })
            .then(data =>{
                if(data.success===1){
                    window.location.reload()
                }
                console.log(data)
            }).catch(error=>{
                console.error('Error:', error); // 捕获网络错误或手动抛出的错误
        })
    })

</script>

{% block footjs %}

{% endblock footjs %}

</body>
</html>